<template>
    <div>
        <div class="absolute w-full h-full top-0">
            <div class="absolute top-0 w-full h-full bg-gray-900"
                 style="background-image: url('/static/images/bg-01.jpg'); background-size: 100%; background-repeat: no-repeat;"></div>
            <div class="container mx-auto px-4 h-full">
                <div class="flex content-center items-center justify-center h-full">
                    <div class="w-full lg:w-4/12 px-4 pt-32">
                        <div class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300 border-0">
                            <div class="rounded-t mb-0 px-6 py-6">
                                <div class="text-center mb-3">
                                    <h4 class="text-lg font-bold">后台管理系统</h4></div>
                                <div class="btn-wrapper text-center">

                                </div>
                                <hr class="mt-6 border-b-1 border-gray-400">
                            </div>
                            <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
                                <form method="POST" action="#">
                                    <div class="relative w-full mb-3">
                                        <label class="block uppercase text-gray-700 text-xs font-bold mb-2"> 用户名</label>

                                        <input v-model="form.mobile"
                                               type="email" class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
                                               placeholder="手机号" style="transition: all 0.15s ease 0s;">
                                        <hd-error name="mobile"></hd-error>
                                    </div>
                                    <div class="relative w-full mb-3">
                                        <label class="block uppercase text-gray-700 text-xs font-bold mb-2">密码</label>
                                        <input v-model="form.password"
                                               type="password" class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
                                               placeholder="密码" style="transition: all 0.15s ease 0s;">
                                        <hd-error name="password" ref="captcha"></hd-error>
                                    </div>
                                    <div>
                                        <hd-captcha v-model="form.captcha" ref="captcha"/>
                                    </div>
                                    <div class="text-center mt-6">
                                        <button
                                            class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full"
                                            type="button" style="transition: all 0.15s ease 0s;" @click="submit">登 录
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <footer class="absolute w-full bottom-0 bg-gray-900 pb-6">
                <div class="container mx-auto px-4">
                    <hr class="mb-6 border-b-1 border-gray-700">
                    <div class="flex flex-wrap items-center md:justify-between justify-center">
                        <div class="w-full md:w-4/12 px-4">

                        </div>
                        <div class="w-full md:w-8/12 px-4">

                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</template>

<script>
export default {
    route: {path: '/login', meta: {guest: true}},
    data() {
        return {
            form: {},
        }
    },
    methods: {
        async submit() {
            const {token} = await this.axios.post('admin/login', this.form)
            localStorage.setItem('token', token)
            location.href = '/admin';
        }
    }
}
</script>

<style scoped>

</style>
